<template>
  <div>
    <Header :title_="title_"></Header>
    <div class="log">
      <van-form v-model="userinfo">
      <van-field
        v-model="userinfo.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="userinfo.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;"> 
        <van-button round block type="info" @click="tijiao">登录</van-button>
      </div>
    </van-form>
    <a class="wj" @click="forge()">忘记密码</a>
    </div>
    <div class="log2">
        <div class="other-login">
            <i></i>
            <img src="../../assets/q.png" alt="">
            <span>QQ登录</span>
            <img src="../../assets/w.png" alt="">
            <span>微信登录</span>
        </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header/Header";
import Vue from "vue";
import { Form, Toast } from "vant";
Vue.use(Form);
Vue.use(Toast);
export default {
  components: {
    Header
  },
  data() {
    return {
      userinfo: {
        username: "",
        password: ""
      },
      title_:'识货'
    };
  },
  methods: {
    tijiao() {
      this.$axios.post("/api/login", this.userinfo).then(
        res => {
          // 把用户名存在vuex中
          this.$store.dispatch('users',res.data.data.username)
          Toast.fail("登录成功");
          //  存在vuex中
          this.$store.dispatch("token", res.data.data.token);
          // console.log(res.data.data.token)
          this.$router.push({ path: "/center" });
        },
        error => {
          Toast.fail("登录失败");
        }
      );
    },
    forge(){
      this.$router.push({path:'/forget'})
    }
  },
  created(){

  }
};
</script>
<style lang="scss" scoped>
.log{
  margin-top: 20px;
}
.van-cell{
  margin-left: 15px;
}
.van-button{
  width: 80px;
  height: 30px;
  background: rgb(243, 75, 75);
  border:1px solid rgb(243, 75, 75);
  font-size: 20px;
  margin-top: 30px;
  margin-left: 40px;
  float: left;
}
.wj{
  text-decoration: underline;
  display: block;
  float: left;
  margin-top: 35px;
  margin-left: 60px;
}
.log2{
  width: 100%;
  height: 200px;
  // border: 1px solid red;
  margin-top: 175px;
  .other-login{
    padding: 0 10px;
    margin-top: 80px;
    position: relative;
    i{
      display: block;
      height: 1px;
      background-color: #e1e1e1;
      margin-top: 24px;
    }
    img:nth-of-type(1){
      width: 57px;
      height: 57px;
      position: absolute;
      top: -28px;
      left: 100px;
    }
    img:nth-of-type(2){
      width: 52px;
      height: 52px;
      position: absolute;
      top: -24px;
      left: 220px;
    }
    span:nth-of-type(1){
      display: block;
      float: left;
      margin-top: 30px;
      margin-left: 88px;
    }
    span:nth-of-type(2){
      display: block;
      float: left;
      margin-top: 31px;
      margin-left: 56px;
    }
  }
}
</style>